<!DOCTYPE html>
<html class="no-js" lang="zxx" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">
    <title></title>

    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>

    <!-- Google fonts include -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,900%7CYesteryear"
          rel="stylesheet">

    <!-- All Vendor & plugins CSS include -->
    <link href="css/vendor.css" rel="stylesheet">
    <!-- Main Style CSS -->
    <link href="css/style.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="/oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="/oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<!-- Start Header Area -->
<header class="header-area">
    <!-- main header start -->
    <div class="main-header d-none d-lg-block">
        <!-- header top start -->
        <div class="header-top bdr-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="welcome-message">
                            <p>欢迎光临花语在线订花系统</p>
                        </div>
                    </div>
                    <div class="col-lg-6 text-right">
                        <div class="header-top-settings">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- header top end -->

        <!-- header middle area start -->
        <div class="header-main-area sticky">
            <div class="container">
                <div class="row align-items-center position-relative">

                    <!-- start logo area -->
                    <div class="col-lg-3">
                        <div class="logo">
                            <a href="index.html">
                                <h2>HUA YU </h2>
                            </a>
                        </div>
                    </div>
                    <!-- start logo area -->

                    <!-- main menu area start -->
                    <div class="col-lg-6 position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- main menu navbar start -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li><a href="index.html">主页</a></li>
                                        <li><a href="store.html">查看商家</a></li>
                                        <li><a href="flower-details.html">查看购物车</a></li>
                                    </ul>
                                </nav>
                                <!-- main menu navbar end -->
                            </div>
                        </div>
                    </div>
                    <!-- main menu area end -->

                    <!-- mini cart area start -->
                    <div class="col-lg-3">
                        <div class="header-configure-wrapper">
                            <div class="header-configure-area">
                                <ul class="nav justify-content-end">
                                    <li class="user-hover">
                                        <a href="#" title="个人中心">
                                            <i class="lnr lnr-user"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <h4>退出</h4>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- mini cart area end -->

                </div>
            </div>
        </div>
        <!-- header middle area end -->
    </div>
    <!-- main header start -->
</header>
<!-- end Header Area -->


<!-- mobile header start -->
</header>
<!-- end Header Area -->


<!-- main wrapper start -->
<main>
    <!-- breadcrumb area start -->
    <div class="breadcrumb-area common-bg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h1>花束明细</h1>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end -->

    <!-- page main wrapper start -->
    <div class="shop-main-wrapper section-space">
        <div class="container" id="container">
            <div class="row">
                <!-- product details wrapper start -->
                <div class="col-lg-12 order-1 order-lg-2">
                    <!-- product details inner end -->
                    <div class="product-details-inner">
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="product-large-slider">
                                    <div class="pro-large-img img-zoom">
                                        <img v-bind:src="result.flower.cover" alt="product-details"/>
                                    </div>
                                </div>
                                <div class="pro-nav slick-row-10 slick-arrow-style">
                                    <div class="pro-nav-thumb" v-for="obj in result.imgs" style="float: left">
                                        <img v-bind:src="obj.url" alt="product-details"/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class="product-details-des">
                                    <h3 class="product-name">{{result.flower.fname}}</h3>
                                    <div class="ratings d-flex">
                                    </div>
                                    <div class="price-box">
                                        <span class="price-regular">{{result.flower.price}}</span>
                                    </div>
                                    <p class="pro-desc">{{result.flower.fmark}}</p>
                                    <div class="quantity-cart-box d-flex align-items-center">
                                        <h5>购买数量:</h5>
                                        <div class="quantity">
                                            <input type="text" v-model="fnum" placeholder="请输入购买数量">
                                        </div>
                                    </div>
                                    <div class="action_link">
                                        <button class="btn btn-cart2" v-on:click="addShopping(fnum)">添加至购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- product details inner end -->
                </div>
            </div>
        </div>
    </div>
</main>
<script src="js/vendor.js"></script>
<!-- Active Js -->
<script src="js/active.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/Vue-2.6.11.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/global.js"></script>
</body>
<script>
    var uri = location.href;
    var params = uri.split('?')[1];
    var fid = params.split('=')[1];
    var app = new Vue({
        el: '#container',
        data: {
            fnum: 1,
            result: {},
            flower: {}
        },
        methods: {
            queryFlowerByFid: function (fid) {
                axios.get('user/queryFlowerByFid/' + fid).then(function (res) {
                    if (res.data.code == 200) {
                        app.result = res.data;
                        console.log(res.data.flower);
                        app.flower = res.data.flower;
                    } else {
                        layer.msg(res.data.msg);
                    }
                })
            },
            addShopping: function (fnum) {
                var param = {
                    fid: this.flower.fid,
                    fnum: fnum
                }
                axios.post('shopping/addShopping', param).then(function (res) {
                    if (res.data.code == 200) {
                        layer.msg(res.data.msg, {icon: 1, time: 1000}, function () {
                            location.href = "shopping.html";
                        });
                    } else {
                        layer.msg(res.data.msg);
                    }
                })
            }
        },
        mounted: function () {
            this.queryFlowerByFid(fid);
        }
    });
</script>

</html>
